<template>
  <body class="hello">
    <div class="Navigation">
      <h1 class="NavMsg1" style="color: #9d0707">PingPang</h1>
      <div class="NavLeft">
        <router-link class="navTo" to="/home">
          <h2 class="NavMsg">Home</h2>
        </router-link>
        <router-link class="navTo" to="/contest">
          <h2 class="NavMsg">Contest</h2>
        </router-link>
        <router-link class="navTo" to="/rate">
          <h2 class="NavMsg">Rate</h2>
        </router-link>
      </div>
      <div class="NavRight">
        <div class="avatar">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <img  src="@/assets/用户.png" alt="@/assets/用户.png">
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a href="javascript:;">个人中心</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript: console.log(2);">退出</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">后台</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
    </div>
    <div class="down">
      <router-view></router-view>
    </div>
  </body>
</template>

<script setup name="NavigationBar">

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


.hello{
  width: 100%;
  height: 100%;
  margin: 0;
  .Navigation {
    display: flex;
    background-color: #2D333B;
    width: 100%;
    height: 5rem;
    .NavLeft{
      background-color: #2D333B;
      width: 50%;
      margin-left: 0;
      display: flex;
    }
    .NavRight{
      background-color: #2D333B;;
      height: 100%;
      width: 50%;
      text-align: right;

      .avatar{
        height: 4rem;
        img{
          margin-top: 0.6rem;
          border-radius: 100%;
          height: 4rem;
          object-fit: contain;
        }

        a-menu{
          background-color: #2C3E50;
        }
        a-menu-item{
          background-color: #2C3E50;
        }
      }
    }
  }

  .down{
    width: 100%;
    height: 100%;

  }
}
.navTo{
  margin-left: 13%;
  display: flex;
  align-items: end;
  text-decoration: none;
  color: #9AA4B1;

  &:hover{
    text-decoration: underline;
    color: cornflowerblue;
  }
}



</style>
